@import "../../styles/mixins.scss";
@import "../../styles/extends.scss";
@import "../../styles/animation.scss";
@import "../../styles/buttons.extends.scss";

.dark {
  @extend %container-dark;
  @apply m-0;
}

.light {
  @extend %container-light;
  @apply m-0;
}

.dark, .light {
  @apply z-50
  flex
  items-center
  justify-center
  w-full
  min-h-24
  h-24;

  .header {
    @apply relative
    flex
    justify-between
    items-center
    w-11/12
    max-w-screen-2xl
    h-16
    
    
    max-lg:w-full;

    .header_button {
      @extend %small-button;
      @apply absolute
      right-0
      text-myTheme-accent;
    }

    .header__title {
      @apply font-myTextFont
      font-semibold
      flex
      justify-center
      w-fit
      h-fit
      max-lg:ms-5
      ms-12;

      h3 {
        @include typing-text();
        @apply my-0
        mx-auto
        text-2xl
        overflow-hidden
        text-nowrap
        border-e-4
        tracking-widest
        border-myTheme-accent
        cursor-default
        
        
        max-md:text-xl;
      }
    }

    .header__link {
      nav {
        @apply flex
        max-md:justify-end
        justify-between
        items-center
        gap-3
        me-12
        h-full
        text-sm
        
        max-sm:w-24

        max-md:flex-wrap
        max-md:w-32
        
        max-lg:me-5;

        a {
          @include return-anim-duration-500();
          @apply relative
          flex
          justify-center
          items-center
          size-8
          
          max-sm:size-6

          max-md:size-7;

          p {
            @apply hidden;
          }

          &:hover {
            @include anim-duration-500();
            @apply scale-125;

            p {
              @apply text-nowrap
              max-md:hidden
              block
              absolute
              -bottom-4
              text-myTheme-accent
              font-normal
              font-myTextFont
              text-xs
              scale-75;
            }
          }
        }
      }
    }
  }
}
